<template>
    <div class="JNPF-common-layout">

        <div class="JNPF-common-layout-center">
            <el-row class="JNPF-common-search-box" :gutter="16">
                <el-form @submit.native.prevent>
                    <el-col :span="6">
                        <el-form-item label="上传时间">
                            <el-date-picker v-model="query.todate" value-format="timestamp" format="yyyy-MM-dd"
                                start-placeholder="开始日期" end-placeholder="结束日期" type="daterange" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="问题">
                            <el-input v-model="query.question" placeholder="请输入" clearable> </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="所属公司">
                            <el-select v-model="query.company" placeholder="请选择" clearable>
                                <el-option v-for="(item, index) in companyOptions" :key="index" :label="item.fullName"
                                    :value="item.id" :disabled="item.disabled"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <template v-if="showAll">
                        <el-col :span="6">
                            <el-form-item label="所属岗位领域">
                                <JNPFTreeSelect @change="getdatabyname" v-model="query.field" placeholder="请选择"
                                    :options="fieldOptions" :props="fieldProps" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="所属岗位类别">
                                <JNPFTreeSelect v-model="query.type" placeholder="请选择" :options="typeOptions"
                                    :props="typeProps" clearable />
                            </el-form-item>
                        </el-col>
                    </template>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                            <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
                            <el-button type="text" icon="el-icon-arrow-down" @click="showAll = true" v-if="!showAll">
                                展开
                            </el-button>
                            <el-button type="text" icon="el-icon-arrow-up" @click="showAll = false" v-else>
                                收起
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div class="JNPF-common-layout-main JNPF-flex-main">
                <div class="JNPF-common-head">
                    <div>
                        <el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">上传知识库
                        </el-button>
                        <el-button type="text" icon="el-icon-download" @click="exportData()">导出
                        </el-button>
                        <el-button type="text" icon="el-icon-delete" @click="handleBatchRemoveDel()">批量删除
                        </el-button>
                    </div>
                    <div class="JNPF-common-head-right">
                        <el-tooltip effect="dark" content="刷新" placement="top">
                            <el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"
                                @click="reset()" />
                        </el-tooltip>
                        <screenfull isContainer />
                    </div>
                </div>
                <JNPF-table v-loading="listLoading" :data="list" @sort-change='sortChange' has-c
                    @selection-change="handleSelectionChange">
                    <el-table-column prop="question" label="问题" width="0" align="left" />
                    <el-table-column prop="company" label="所属公司" width="0" align="left" />
                    <el-table-column prop="field" label="所属岗位领域" width="0" align="left" />
                    <el-table-column prop="type" label="所属岗位类别" width="0" align="left" />
                    <el-table-column prop="tonei" label="是否同步上传到社区" width="120" align="center">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.tonei" :active-value="'开'" :inactive-value="'关'"
                                @change="handleToneiChange(scope.row)" :disabled="!scope.row.editable" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="todate" label="上传时间" width="0" align="left" />
                    <el-table-column label="操作" fixed="right" width="100">
                        <template slot-scope="scope">
                            <el-button type="text" @click="addOrUpdateHandle(scope.row.id)">编辑
                            </el-button>
                            <el-button type="text" class="JNPF-table-delBtn" @click="handleDel(scope.row.id)">删除
                            </el-button>
                            <el-button type="text" @click="viewAnswerForm(scope.row)"
                                v-if="scope.row.answer">查看回答</el-button>
                        </template>
                    </el-table-column>
                </JNPF-table>
                <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
                    @pagination="initData" />
            </div>
        </div>
        <JNPF-Form v-if="formVisible" ref="JNPFForm" @refresh="refresh" />
        <ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
        <el-dialog v-if="answerDialogVisible" :visible.sync="answerDialogVisible" title="查看详情" width="60%"
            append-to-body class="answer-dialog">
            <div class="answer-title">问题内容</div>
            <div class="answer-content" v-html="curQuestion"></div>
            <div class="answer-title">回答内容</div>
            <div class="answer-content" v-html="currentAnswer"></div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="answerDialogVisible = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import request from '@/utils/request'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
import JNPFForm from './Form'
import ExportBox from './ExportBox'
import { previewDataInterface } from '@/api/systemData/dataInterface'

export default {
    components: { JNPFForm, ExportBox },
    data() {
        return {
            answerDialogVisible: false,
            currentAnswer: '',
            curQuestion: '',
            showAll: false,
            query: {
                todate: undefined,
                question: undefined,
                company: undefined,
                field: undefined,
                type: undefined,
            },
            treeProps: {
                children: 'children',
                label: 'fullName',
                value: 'id'
            },
            list: [],
            listLoading: true,
            multipleSelection: [],
            total: 0,
            listQuery: {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: "todate",
            },
            dataForm: {
                todate: "",
                userid: "",
                question: '',
                answer: '',
                company: "",
                field: "",
                type: "",
                tonei: 0,
            },
            formVisible: false,
            exportBoxVisible: false,
            columnList: [
                { prop: 'todate', label: '上传时间' },
                { prop: 'userid', label: '上传者' },
                { prop: 'question', label: '问题' },
                { prop: 'company', label: '所属公司' },
                { prop: 'field', label: '所属岗位领域' },
                { prop: 'type', label: '所属岗位类别' },
                { prop: 'tonei', label: '是否同步上传到社区' },
                { prop: 'answer', label: '答案' },
            ],
            companyOptions: [],
            companyProps: { "label": "fullName", "value": "id" },
            fieldOptions: [],
            fieldProps: { "label": "fullName", "value": "id", "children": "children" },
            typeOptions: [],
            typeProps: { "label": "fullName", "value": "id", "children": "children" },
        }

    },
    computed: {},
    created() {
        this.initData()
        this.getcompanyOptions();
        this.getfieldOptions();
    },
    methods: {
        viewAnswerForm(row) {
            this.currentAnswer = row.answer || '暂无回答内容';
            this.curQuestion = row.question;
            this.answerDialogVisible = true;
        },
        getdatabyname(value) {
            this.selectdata = this.fieldOptions.find(option => option.id === value);
            this.dataForm.field = this.selectdata.enCode;
            console.log('领域', this.dataForm.field);
            getDictionaryDataSelector(this.dataForm.field).then(res => {
                this.typeOptions = res.data.list
            })
        },
        getcompanyOptions() {
            getDictionaryDataSelector('b0441013ce1241c7bd81812199306f2a').then(res => {
                this.companyOptions = res.data.list
            })
        },
        getfieldOptions() {
            getDictionaryDataSelector('90076a6023284cb1adc217fff660e6b5').then(res => {
                this.fieldOptions = res.data.list
            })
        },
        sortChange({ column, prop, order }) {
            this.listQuery.sort = order == 'ascending' ? 'asc' : 'desc'
            this.listQuery.sidx = !order ? '' : prop
            this.initData()
        },
        initData() {
            this.listLoading = true;
            let _query = {
                ...this.listQuery,
                ...this.query
            };
            request({
                url: `/api/example/Whu_knowledgebase/getList`,
                method: 'post',
                data: _query
            }).then(res => {
                var _list = [];
                for (let i = 0; i < res.data.list.length; i++) {
                    let _data = res.data.list[i];
                    _list.push(_data)
                }
                this.list = _list
                console.log(this.list)
                this.total = res.data.pagination.total

                this.listLoading = false
            })
        },
        handleDel(id) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                type: 'warning'
            }).then(() => {
                request({
                    url: `/api/example/Whu_knowledgebase/${id}`,
                    method: 'DELETE'
                }).then(res => {
                    this.$message({
                        type: 'success',
                        message: res.msg,
                        onClose: () => {
                            this.initData()
                        }
                    });
                })
            }).catch(() => {
            });
        },
        handleSelectionChange(val) {
            const res = val.map(item => item.id)
            this.multipleSelection = res
        },
        handleBatchRemoveDel() {
            if (!this.multipleSelection.length) {
                this.$message({
                    type: 'error',
                    message: '请选择一条数据',
                    duration: 1500,
                })
                return
            }
            const ids = this.multipleSelection.join()
            this.$confirm('您确定要删除这些数据吗, 是否继续？', '提示', {
                type: 'warning'
            }).then(() => {
                request({
                    url: `/api/example/Whu_knowledgebase/batchRemove/${ids}`,
                    method: 'DELETE'
                }).then(res => {
                    this.$message({
                        type: 'success',
                        message: res.msg,
                        onClose: () => {
                            this.initData()
                        }
                    });
                })
            }).catch(() => {
            })
        },
        addOrUpdateHandle(id, isDetail) {
            this.formVisible = true
            this.$nextTick(() => {
                this.$refs.JNPFForm.init(id, isDetail)
            })
        },
        exportData() {
            this.exportBoxVisible = true
            this.$nextTick(() => {
                this.$refs.ExportBox.init(this.columnList)
            })
        },
        download(data) {
            let query = { ...data, ...this.listQuery, ...this.query }
            request({
                url: `/api/example/Whu_knowledgebase/Actions/Export`,
                method: 'GET',
                data: query
            }).then(res => {
                if (!res.data.url) return
                window.location.href = this.define.comUrl + res.data.url
                this.$refs.ExportBox.visible = false
                this.exportBoxVisible = false
            })
        },
        search() {
            this.listQuery = {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: "todate",
            }
            this.initData()
        },
        refresh(isrRefresh) {
            this.formVisible = false
            if (isrRefresh) this.reset()
        },

        reset() {
            for (let key in this.query) {
                this.query[key] = undefined
            }
            this.listQuery = {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: "todate",
            }
            this.initData()
        }
    }
}
</script>
<style>
.answer-dialog {
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.answer-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.answer-content {
    padding: 15px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    min-height: 200px;
    max-height: 500px;
    overflow-y: auto;
    background-color: #fafafa;
    font-size: 14px;
    color: #666;
}

.answer-content::-webkit-scrollbar {
    width: 6px;
}

.answer-content::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 3px;
}

.answer-content::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

.answer-content>>>.ql-editor {
    padding: 0;
}
</style>
